﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_UserCenter.cshtml";
    //Layout = null;
}
@section head{
    <link href="~/css/usercenter.css" rel="stylesheet" />
}
@model Beauty.Model.user
<div class="layui-tab layui-tab-brief" lay-filter="tab-filter">
    <ul class="layui-tab-title">
        <li class="" id="info">我的资料</li>
        <li id="avatar">头像</li>
        <li id="pass">密码</li>

    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item" id="info_content">
            <p>手机号：@Model.UMobile</p>
            <p>昵称：@Model.NickName</p>
            <p>注册时间：@Model.RegTime</p>

        </div>
        <div class="layui-tab-item" id="avatar_content">
            <div style="">
                <input type="file" name="head" class="layui-upload-file" lay-title="上传头像">
            </div>
            <p style="color:#999;">建议尺寸168*168，支持jpg、png、gif，最大不能超过30KB</p>

            <img style="border-radius:100%;" src="@Model.IconUrl" alt="" />
        </div>
        <div class="layui-tab-item" id="pass_content">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">当前密码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nowpass" required lay-verify="required" placeholder="请输入当前密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="newpass" id="newpass" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="repass" id="repass" required lay-verify="required" placeholder="确认密码" autocomplete="off" class="layui-input">
                    </div>

                </div>

                <div class="layui-form-item">


                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="changePwd">立即提交</button>

                    </div>
                </div>
            </form>




        </div>
    </div>
</div>




@section footerJs{
    <script>

        layui.use(['upload', 'form'], function () {
            var form = layui.form();
            form.on('submit(changePwd)', function (data) {
                //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                //layer.msg(JSON.stringify(data.field));

                nowpass = data.field.nowpass;
                newpass = data.field.newpass;
                repass = data.field.repass;

                if (newpass != repass) {
                    layer.msg('两次密码并不一致', { icon: 2, anim: 6 });
                    return false
                }
                $.post("/UserCenter/ChangePass", { nowpass: nowpass, newpass: newpass }, function (data) {

                    if (data.resCode != 200) {
                        layer.alert(data.resMsg, { icon: 2})
                    } else {
                        layer.alert(data.resMsg, function (index) {
                            layer.close(index)
                            
                        })

                    }
                }, "json")
                return false;
            });

            layui.upload({
                url: 'UploadHead' //上传接口
              , success: function (res) { //上传成功后的回调
                  if (res.resCode == 200) {
                      location.reload();
                  } else {
                      layer.alert(res.msg);
                  }

              }
            })


            var thisId = window.location.hash;
            $(".layui-tab-title li").removeClass("layui-this");

            switch (thisId) {
                case "#info":
                    $("#info").addClass("layui-this");
                    $("#info_content").addClass("layui-show");

                    break;
                case "#avatar":
                    $("#avatar").addClass("layui-this");
                    $("#avatar_content").addClass("layui-show");

                    break;
                case "#pass":
                    $("#pass").addClass("layui-this");
                    $("#pass_content").addClass("layui-show");

                    break;
                default:

            }

            element.on('tab(tab-filter)', function (data) {
                //console.log(this); //当前Tab标题所在的原始DOM元素
                //console.log(data.index); //得到当前Tab的所在下标
                //console.log(data.elem); //得到当前的Tab大容器
                switch (data.index) {
                    case 0:
                        location.hash = "info";
                        break;
                    case 1:
                        location.hash = "avatar";
                        break;
                    case 2:
                        location.hash = "pass";

                        break;
                    default:

                }
            });

        });
    </script>


}